let c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    mx = 0, my = 0;
const handleWindowResize = () => {
  c.width = window.devicePixelRatio * innerWidth;
  c.height = window.devicePixelRatio * innerHeight;
  mx = c.width / 2;
  my = c.height / 2;
}
window.addEventListener('resize', handleWindowResize, false);
handleWindowResize();

const observer = { x: 0, y: -100, z: 1000 };
let deg = 0, degOffset = .5;

let w0 = new Wave(0, 0, {
  count: 50,
  derta: 10,
  a: 20,
  b: 2,
  wpr: 2,
  wpz: 0
});
let w1 = new Wave(0, 0, {
  count: 50,
  derta: 10,
  a: 20,
  b: 2,
  wpr: 2,
  wpz: 20
});
let w2 = new Wave(0, 0, {
  count: 50,
  derta: 10,
  a: 20,
  b: 2,
  wpr: 2,
  wpz: 40
});
let w3 = new Wave(0, 0, {
  count: 50,
  derta: 10,
  a: 20,
  b: 2,
  wpr: 2,
  wpz: 60
});

ctx.translate(mx, my);

w0.startAni(() => {
  ctx.clearRect(-mx, -my, c.width, c.height);
  deg += degOffset;
  deg = deg > 359 ? 0 : deg;

  w0.draw(ctx);
  w0.update(observer, deg);
  w1.draw(ctx);
  w1.update(observer, deg);
  w2.draw(ctx);
  w2.update(observer, deg);
  w3.draw(ctx);
  w3.update(observer, deg);
})